<template>
  <div class="app-container home">
    <!-- <h2>首页修改</h2> -->
    <!-- <h2> </h2> -->
    <el-row :gutter="1">
          <p>
            <b>我的工作</b>
          </p>
        <el-col :xs="24" :sm="24" :lg="7">
          <div class="chart-wrapper" style="height: 230px;">
            <approve-pie-chart />
          </div>
        </el-col>
        <el-col :xs="24" :sm="24" :lg="7">
          <div class="chart-wrapper" style="height: 230px;">
            <attend-pie-chart/>
          </div>
        </el-col>
        <el-col :xs="24" :sm="24" :lg="7">
          <div class="chart-wrapper" style="height: 230px;">
            <work-pie-chart/>
          </div>
        </el-col>
          <!-- <el-col :xs="24" :sm="24" :lg="19" class="mywork">
              <img src="../assets/images/mywork.jpg">
          </el-col> -->
    </el-row>

    <el-divider/>

    <el-row :gutter="1">
      <el-col :sm="24" :lg="20" style="padding-left: 50px">
        <el-button
          type="primary"
          size="mini"
          icon="el-icon-cloudy"
          plain >
          <router-link :to="'/employee/apply/entry'" class="link-type">
            <span>员工入职办理</span>
          </router-link>
        </el-button>

        <el-button type="primary"  size="mini"   icon="el-icon-cloudy"  plain  >
          <router-link :to="'/employee/apply/employeeTransfer'" class="link-type">
            <span>员工调动</span>
          </router-link>
        </el-button >
      </el-col>
    </el-row>

    <el-divider/>

    <el-row :gutter="1">
      <el-col :xs="24" :sm="24" :lg="10">
        <el-row :gutter="1">
          <p>
            <b>常用应用</b>
          </p>
          <el-col :xs="24" :sm="24" :lg="6" class="bottomLeft">
            <!-- <img src="../assets/images/homeicon.png" @click="callVavation"> -->
            <div>
              <router-link :to="'/employee/apply/vacation'" class="link-type">
                <img src="../assets/images/homeicon.png">
                <div>请假</div>
              </router-link>
            </div>
          </el-col>
          <el-col :xs="24" :sm="24" :lg="6" class="bottomLeft">
            <div>
              <router-link :to="'/employee/apply/go_out'" class="link-type">
                <img src="../assets/images/homeicon.png">
                <div>外出</div>
              </router-link>
            </div>
          </el-col>
          <el-col :xs="24" :sm="24" :lg="6" class="bottomLeft">
            <div>
              <router-link :to="'/employee/apply/sign_agin'" class="link-type">
                <img src="../assets/images/homeicon.png">
                <div>补签</div>
              </router-link>
            </div>
          </el-col>
          <el-col :xs="24" :sm="24" :lg="6" class="bottomLeft">
            <img src="../assets/images/homeicon.png">
            <div>加班</div>
          </el-col>
        </el-row>
        <el-row  style="margin-top: 40px">
          <el-col :xs="24" :sm="24" :lg="6" class="bottomLeft">
            <img src="../assets/images/homeicon.png">
            <div>倒休</div>
          </el-col>
          <el-col :xs="24" :sm="24" :lg="6" class="bottomLeft">
            <img src="../assets/images/homeicon.png">
            <div>出差</div>
          </el-col>
          <el-col :xs="24" :sm="24" :lg="6" class="bottomLeft">
            <img src="../assets/images/homeicon.png">
            <div>资质</div>
          </el-col>
          <el-col :xs="24" :sm="24" :lg="6" class="bottomLeft">
            <div>
              <router-link :to="'/employee/apply/leave'" class="link-type">
                <img src="../assets/images/homeicon.png">
                <div>离职</div>
              </router-link>
            </div>
          </el-col>
        </el-row>
      </el-col>

      <el-col :xs="24" :sm="24" :lg="1">
        <div style="background: #DCDFE6;width: 1px;height: 400px"></div>
      </el-col>

      <el-col :xs="24" :sm="24" :lg="11">
          <p>
            <b >事件管理</b>
          </p>
        <calendar/>
        <!-- <el-calendar class="calendar" v-model="setDate" style="zoom: 0.6;"> -->
<!--          <template-->
<!--            slot="dateCell"-->
<!--            slot-scope="{date, data}">-->
<!--            <p :data='date'>-->
<!--              {{ data.day.split('-').slice(2).join('-')}}-->
<!--              <span class="tag" :class="initTag(data.day)['flag'] ? 'mark-max-color' : 'mark-min-color'" v-if="initTag(data.day)">{{ initTag(data.day)['flag'] ? '高峰' : '低峰' }}</span>-->
<!--              <span class="tag-radius" :class="initTag(data.day)['flag'] ? 'mark-max' : 'mark-min'" v-if="initTag(data.day)"></span>-->
<!--            </p>-->
<!--          </template>-->
        <!-- </el-calendar> -->

      </el-col>
    </el-row>
  <el-divider/>
    <p>
      <b>数据统计</b>
    </p>
    <el-row :gutter="1">
         <!-- <el-col :xs="24" :sm="24" :lg="6">
        <div class="chart-wrapper">
          <approve-pie-chart/>
        </div>
      </el-col> -->
      <el-col :xs="24" :sm="24" :lg="8">
        <div class="chart-wrapper">
          <pie-chart/>
        </div>
      </el-col>
      <el-col :xs="24" :sm="24" :lg="8">
        <div class="chart-wrapper">
          <bar-chart/>
        </div>
      </el-col>
      <el-col :xs="24" :sm="24" :lg="8">
        <div class="chart-wrapper">
          <raddar-chart/>
        </div>
      </el-col>
    </el-row>
    <!--    <el-row style="background:#fff;padding:16px 16px 0;margin-bottom:32px;">-->
    <!--      <line-chart :chart-data="lineChartData" />-->
    <!--    </el-row>-->
  </div>
</template>

<script>
  import PanelGroup from './dashboard/PanelGroup'
  import LineChart from './dashboard/LineChart'
  import RaddarChart from './dashboard/RaddarChart'
  import PieChart from './dashboard/PieChart'
  import ApprovePieChart from './dashboard/ApprovePieChart'
  import AttendPieChart from './dashboard/AttendPieChart'
  import WorkPieChart from './dashboard/WorkPieChart'
  import BarChart from './dashboard/BarChart'
  import Calendar from "./calendar";

  const lineChartData = {
    newVisitis: {
      expectedData: [100, 120, 161, 134, 105, 160, 165],
      actualData: [120, 82, 91, 154, 162, 140, 145]
    },
    messages: {
      expectedData: [200, 192, 120, 144, 160, 130, 140],
      actualData: [180, 160, 151, 106, 145, 150, 130]
    },
    purchases: {
      expectedData: [80, 100, 121, 104, 105, 90, 100],
      actualData: [120, 90, 100, 138, 142, 130, 130]
    },
    shoppings: {
      expectedData: [130, 140, 141, 142, 145, 150, 160],
      actualData: [120, 82, 91, 154, 162, 140, 130]
    }
  }
  export default {
    name: "Index",
    components: {
      PanelGroup,
      LineChart,
      RaddarChart,
      PieChart,
      ApprovePieChart,
      AttendPieChart,
      WorkPieChart,
      BarChart,
      Calendar
    },
    data() {
      return {
        // 版本号
        version: "3.8.2",
        lineChartData: lineChartData.newVisitis,
        setDate: new Date(), // 选择的日期

      };
    },
    methods: {
      callVavation(){
        console.info("点击请假");

      },
      goTarget(href) {
        window.open(href, "_blank");
      },
      handleSetLineChartData(type) {
        this.lineChartData = lineChartData[type]
      }
    },
  };
</script>

<style scoped lang="scss">

  .home {
    .calendar {
      border: 1px solid #EBEEF5;
    }
    .bottomLeft{
      display: inline-block;
      text-align: center;
      img{
        width: 70px;
        height: 70px;
      }
    }
    .mywork{
      display: inline-block;
      text-align: center;
      img{
        width: 693px;
        height: 156px;
      }
    }
    blockquote {
      padding: 10px 20px;
      margin: 0 0 20px;
      font-size: 17.5px;
      border-left: 5px solid #eee;
    }

    hr {
      margin-top: 20px;
      margin-bottom: 20px;
      border: 0;
      border-top: 1px solid #eee;
    }

    .col-item {
      margin-bottom: 20px;
    }

    ul {
      padding: 0;
      margin: 0;
    }

    font-family: "open sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 13px;
    color: #676a6c;
    overflow-x: hidden;

    ul {
      list-style-type: none;
    }

    h4 {
      margin-top: 0px;
    }

    h2 {
      margin-top: 10px;
      font-size: 26px;
      font-weight: 100;
    }

    p {
      margin-top: 10px;

      b {
        font-weight: 700;
      }
    }

    .update-log {
      ol {
        display: block;
        list-style-type: decimal;
        margin-block-start: 1em;
        margin-block-end: 1em;
        margin-inline-start: 0;
        margin-inline-end: 0;
        padding-inline-start: 40px;
      }
    }


  }

  .dashboard-editor-container {
    padding: 2px;
    background-color: rgb(240, 242, 245);
    position: relative;

    .chart-wrapper {
      background: #fff;
      padding: 10px 10px 0;
      margin-bottom: 32px;

    }
  }

  @media (max-width: 1024px) {
    .chart-wrapper {
      padding: 2px;
    }
  }


</style>
